<template>
<div>
    <home-header></home-header>
    <div class= "home" ref= "wrapper">
        <div>
            <home-swiper :swiperList= 'swiperList'></home-swiper>
            <home-icons :iconList= 'iconList'></home-icons>
            <home-recommend :recommendList= 'recommendList'></home-recommend>
            <home-week :weekendList= 'weekendList'></home-week>
        </div>
    </div>
</div>
</template>
<script>
//父组件通过axios访问json数据，再通过属性的方式传递给各个子组件
import HomeHeader from './components/home-header'
import HomeSwiper from './components/home-swiper'
import HomeIcons from './components/home-icons'
import HomeRecommend from './components/home-recommend'
import HomeWeek from './components/home-week'
import axios from 'axios'
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
export default {
    name: 'Home',
    components: {
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeek
    },
    data() {
        return {
            swiperList: [],
            weekendList: [],
            iconList: [],
            recommendList: [],
            wrapper: 'wrapper',
            lastCity: ''
        }
    },
    computed: {
        ...mapState(['city'])
    },
    methods: {
        getHomeInfoSucc(res) {
            res = res.data
            if (res.ret && res.data) {
                this.swiperList = res.data.swiperList
                this.weekendList = res.data.weekendList
                this.iconList = res.data.iconList
                this.recommendList = res.data.recommendList
                //res.data是获取响应的数据，然后再.data是访问数据中的data属性（对象）.ret是访问ret属性
            }
        },
        getHomeInfo() {
            axios.get('/api/index.json?city=' + this.city)
            //访问json数据后通过回调函数将json数据赋值给组件属性，再传给子组件
                .then(this.getHomeInfoSucc)
        }
    },
    //每次切换到Home页面，mounted都会重新执行，ajax也会重复发送
    mounted() {
        //computed中的city属性
        this.lastCity = this.city
        this.getHomeInfo()
        this.scroll = new BScroll(this.$refs.wrapper)
    },
    //由于mounte执行一次之后不会重复加载，所以设置activated
    activated() {
        if (this.lastCity !== this.city) {
            this.getHomeInfo()
            this.lastCity = this.city
        }
    }
}
</script>
<style lang="stylus" scoped>
*
    box-sizing border-box
    padding 0
    margin 0
    .home
        position absolute
        top .86rem
        bottom 0
        left 0
        right 0
        overflow hidden
</style>
